<template>
	<view class="">
		<view class='container-box'>
			<view class='title'>
				<text>手机直播</text>
			</view>
			<view class="input-box">
				<input v-model="roomName" maxlength="20" @input='bindRoomName' placeholder="请输入直播间名称" placeholder-style="color:#ffffff;opacity: 0.55;" />
			</view>
		</view>
		<image class='video' src="" @tap='tapVideo'></image>
		<view class='video-box'>
			<image src='../../Resources/tips.png'></image>
			<text>音视频推流</text>
		</view>
		<image class='audio' src="" @tap='tapAudio'></image>
		<view class='audio-box'>
			<image src='../../Resources/tips.png'></image>
			<text>纯音频推流</text>
		</view>
		<view class='bottom-btn'>
			<button type="primary" @tap="create" hover-class="none">开始直播</button>
		</view>
		<cover-image class='close' src="/pages/Resources/back.png" @tap="onBack"></cover-image>
	</view>

</template>

<script>
	import liveroom from 'wxcomponents/mlvb-live-room/mlvbliveroomcore.js'
	export default {
		data() {
			return {
				roomName: '', // 房间名称
				userName: '1234', // 用户名称
				pureAudio: false,
				tapTime: '', // 防止两次点击操作间隔太快
			}
		},
		onReady: function () {
		  var self = this;
		  
		  var userinfo=uni.getStorageSync('user_info')
		  var usersig=uni.getStorageSync('user_sign')
		  
		},
		methods: {
			// 进入rtcroom页面
			create: function() {
				var self = this;
				// 防止两次点击操作间隔太快
				var nowTime = new Date();
				if (nowTime - this.tapTime < 1000) {
					return;
				}
				if (!self.roomName) {
					self.roomName = "新建直播间";
				}
				if (/[<>*{}()^%$#@!~&= ]/.test(self.roomName)) {
					uni.showModal({
						title: '提示',
						content: '名称不能为空或包含特殊字符',
						showCancel: false
					});
					return;
				};
				var url = '/pages/Meet/MLVBRoom/MLVBRoom?type=create&roomName=' + self.roomName + '&userName=' + self.userName +'&pureAudio=' + self.pureAudio;
				// uni.setStorageSync('isAnchor', true
				// wx.setStorageSync('isAnchor', true)
				// console.log(self.$store.state.isAnchor, '报错？')
				// self.$store.state.isAnchor = true
				// console.log(self.$store.state.isAnchor, '是主播了')
				
				uni.redirectTo({
					url: url
				});
				uni.showToast({
					title: '进入房间',
					icon: 'success',
					duration: 1000
				})
				self.tapTime= nowTime

			},
		}
	}
</script>

<style scoped>
	.container-box {
		background-image: url(https://mc.qcloudimg.com/static/img/7da57e0050d308e2e1b1e31afbc42929/bg.png);
		background-color: #333;
		background-repeat: no-repeat;
		background-size: cover;
		height: 100vh;
	}

	.input-box {
		background-color: transparent;
		color: #ffffff;
		padding: 3vw 5vw;
		border-color: #577785;
		border-style: solid;
		border-top-width: 0px;
		border-right-width: 0px;
		border-bottom-width: 1px;
		border-left-width: 0px;
		padding-top: 20%;
		margin-left: 30px;
		margin-right: 30px;
		text-align: center;
	}

	.video {
		position: absolute;
		width: 8vw;
		height: 8vw;
		left: 32vw;
		bottom: 30vh;
	}

	.video-box {
		position: absolute;
		width: 22vw;
		height: 8vw;
		left: 25vw;
		bottom: calc(30vh - 10vw);
	}

	.video-box image {
		position: absolute;
		width: 22vw;
		height: 60rpx;
		text-align: center;
	}

	.video-box text {
		position: absolute;
		width: 22vw;
		top: 12rpx;
		color: #fff;
		font-size: 12px;
		text-align: center;
	}

	.audio {
		position: absolute;
		width: 8vw;
		height: 8vw;
		left: 60vw;
		bottom: 30vh;
	}

	.audio-box {
		position: absolute;
		width: 22vw;
		height: 8vw;
		left: 53vw;
		bottom: calc(30vh - 10vw);
	}

	.audio-box image {
		position: absolute;
		width: 22vw;
		height: 60rpx;
		text-align: center;
	}

	.audio-box text {
		position: absolute;
		width: 22vw;
		top: 12rpx;
		color: #fff;
		font-size: 12px;
		text-align: center;
	}

	.bottom-btn {
		position: fixed;
		width: 92vw;
		left: 4vw;
		bottom: 6vh;
	}

	.bottom-btn button {
		background-color: #006eff;
		border-radius: 50px;
	}
</style>
